<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<link type="text/css" rel="stylesheet" href="validator.css" />
	<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
	<script type="text/javascript" src="jquery.validator.js"></script>
	<style type="text/css">
		form { width: 800px; height:400px; margin:auto; margin-top:20px; border:solid 1px black; padding:20px; font-family: Arial; font-size:12px; }
	</style>
</head>
<body>
	<form>
		
		<table>
            <tr>
                <td>Username:</td>
                <td><input type="text" style="width:300px;" data-validator-group="customValidatorGroupName" data-validator-required="Please enter your desired username." /></td>
            </tr>
            <tr>
                <td>New Password:</td>
                <td><input id="newpassword" type="password" style="width:300px;" data-validator-group="customValidatorGroupName" data-validator-required="Please enter your desired password." data-validator-regular="Invalid password, the password must be 6 characters or longer." data-validator-validexpress=".{6,}" /></td>
            </tr>
            <tr>
                <td>Confirm Password:</td>
                <td><input type="password" style="width:300px;" data-validator-group="customValidatorGroupName" data-validator-required="Please confirm your password." data-validator-compare="Password mismatch, the password and confirm password fields must match." data-validator-compareto="newpassword" /></td>
            </tr>
			<tr>
				<td>Email:</td>
				<td><input type="text" style="width:300px;" data-validator-group="customValidatorGroupName" data-validator-required="Please enter your email address." data-validator-email="Invalid email address, please check for typos." /></td>
			</tr>
			<tr>
				<td>Age:</td>
				<td><input type="text" style="width:300px;" data-validator-group="customValidatorGroupName" data-validator-custom="Invalid age, Your age must be greater than 5 and less than 100." data-validator-customfn="var age = parseInt(this.value); return age > 5 && age < 100;" /></td>
			</tr>
			<tr>
				<td>Gender:</td>
				<Td>
					<span data-validator-group="customValidatorGroupName" data-validator-required="Please specify your gender.">
						<input id="genmale" type="radio" name="gender" /><label for="genmale">Male</label>
						<input id="genfem" type="radio" name="gender" /><label for="genfem">Female</label>
					</span>
				</Td>
			</tr>
			<tr>
				<td></td>
				<td>
					<span data-validator-group="customValidatorGroupName" data-validator-required="Please agree to the terms and conditions before proceeding">
						<input id="terms" type="checkbox" />
						<label for="terms">I agree to the terms and conditions</label>
					</span>
				</td>
			</tr>
			<tr>
				<td></td>
				<td><input type="submit" value="Submit" onclick="return validate('customValidatorGroupName');"></td>
			</tr>
		</table>
	
	</form>
</body>
</html>
